<template>
  <div class="home">
    <div class="body">
        <div class="time">{{$moment(time).format('YYYY-MM-DD')}}</div>
        <div class="store">store:{{list}}</div>
        <div class="minix">{{name}}</div>
        <el-button type="primary" @click="saveCookies()">保存一个cookie</el-button>
        <el-button type="primary" @click="handleClick()">点击</el-button>
        <div class="cookies">{{cookies}}</div>
    </div>

    <div class="menuModalBox-w" v-show="dialogtShow">
      <div class="menuModalBox">
        <div class="close">
          <div class="el-icon-circle-close icon" @click="dialogtShow = false" />
        </div>
        
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Mixin from '@/components/mixin'

export default {
  name: 'demo',
  data () {
    return {
      dialogtShow: false,
      time: '',
      name: 'demo',
      lists: [1, 2, 3, 4],
      cookies: ''
    }
  },
  computed: {
    ...mapState({
      list: state => state.demo.list
    })
  },
  components: {},
  mixins: [Mixin], // demo.vue 中声明minix 进行混合
  methods: {
    getTime () {
      let vm = this
      setTimeout(() => {
        vm.time = '2020-08-17 00:00:00'
      }, 1000)
    },
    speak () {
      let vm = this
      vm.name = 'this is demo'
    },
    submit () {
      console.log('submit')
    },
    saveCookies () {
      this.$cookies.set('keyName', 'cookies')
      this.cookies = this.$cookies.get('keyName')
    },
    handleClick () {
      this.$store.commit('setList', 3)
    }
  },
  watch: {},
  mounted () {
    let vm = this
    vm.getTime()
    vm.speak()
    vm.testPhone(18013344018)
  },
  beforeDestroy: function () {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
@import "../../css/demo.scss";
</style>
